{% extends "base.html" %}

{% block title %}管理后台 - 停车场管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-3">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">管理菜单</h5>
            </div>
            <div class="list-group list-group-flush">
                <a href="#dashboard" class="list-group-item list-group-item-action active" data-bs-toggle="tab">
                    <i class="fas fa-tachometer-alt"></i> 仪表盘
                </a>
                <a href="#records" class="list-group-item list-group-item-action" data-bs-toggle="tab">
                    <i class="fas fa-list"></i> 停车记录
                </a>
                <a href="#settings" class="list-group-item list-group-item-action" data-bs-toggle="tab">
                    <i class="fas fa-cog"></i> 系统设置
                </a>
            </div>
        </div>
    </div>
    
    <div class="col-md-9">
        <div class="tab-content">
            <!-- 仪表盘 -->
            <div class="tab-pane fade show active" id="dashboard">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card bg-primary text-white">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h4>今日收入</h4>
                                        <h2>¥{{ "%.2f"|format(today_income) }}</h2>
                                    </div>
                                    <div class="align-self-center">
                                        <i class="fas fa-money-bill-wave fa-3x"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="card bg-success text-white">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h4>今日停车</h4>
                                        <h2>{{ today_records|length }}</h2>
                                    </div>
                                    <div class="align-self-center">
                                        <i class="fas fa-car fa-3x"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="card bg-info text-white">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h4>剩余车位</h4>
                                        <h2>{{ config.total_spaces - (today_records|selectattr("exit_time","none")|list|length) }}</h2>
                                    </div>
                                    <div class="align-self-center">
                                        <i class="fas fa-parking fa-3x"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card mt-4">
                    <div class="card-header">
                        <h5 class="mb-0">今日停车记录</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>车牌号</th>
                                        <th>车型</th>
                                        <th>入场时间</th>
                                        <th>出场时间</th>
                                        <th>费用</th>
                                        <th>状态</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for record in today_records %}
                                    <tr>
                                        <td>{{ record.license_plate }}</td>
                                        <td>{{ record.vehicle_type }}</td>
                                        <td>{{ record.entry_time.strftime('%H:%M') }}</td>
                                        <td>
                                            {% if record.exit_time %}
                                                {{ record.exit_time.strftime('%H:%M') }}
                                            {% else %}
                                                <span class="badge bg-warning">在场内</span>
                                            {% endif %}
                                        </td>
                                        <td>¥{{ "%.2f"|format(record.parking_fee) }}</td>
                                        <td>
                                            {% if record.is_paid %}
                                                <span class="badge bg-success">已支付</span>
                                            {% elif record.exit_time %}
                                                <span class="badge bg-danger">未支付</span>
                                            {% else %}
                                                <span class="badge bg-warning">在场内</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 停车记录 -->
            <div class="tab-pane fade" id="records">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">所有停车记录</h5>
                        <button class="btn btn-sm btn-primary" onclick="loadRecords()">
                            <i class="fas fa-sync"></i> 刷新
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped" id="recordsTable">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>车牌号</th>
                                        <th>车型</th>
                                        <th>入场时间</th>
                                        <th>出场时间</th>
                                        <th>停车时长</th>
                                        <th>费用</th>
                                        <th>支付状态</th>
                                    </tr>
                                </thead>
                                <tbody id="recordsTableBody">
                                    <!-- 动态加载 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 系统设置 -->
            <div class="tab-pane fade" id="settings">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">系统设置</h5>
                    </div>
                    <div class="card-body">
                        <form id="settingsForm">
                            <div class="mb-3">
                                <label for="totalSpaces" class="form-label">总车位数</label>
                                <input type="number" class="form-control" id="totalSpaces" 
                                       value="{{ config.total_spaces }}" min="1" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="firstHourFee" class="form-label">首小时费用 (元)</label>
                                <input type="number" class="form-control" id="firstHourFee" 
                                       value="{{ config.first_hour_fee }}" step="0.1" min="0" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="additionalHourFee" class="form-label">后续每小时费用 (元)</label>
                                <input type="number" class="form-control" id="additionalHourFee" 
                                       value="{{ config.additional_hour_fee }}" step="0.1" min="0" required>
                            </div>
                            
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> 保存设置
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function loadRecords() {
    $.ajax({
        url: '/api/records',
        method: 'GET',
        success: function(response) {
            if (response.success) {
                let html = '';
                response.records.forEach(record => {
                    const entryTime = new Date(record.entry_time);
                    const exitTime = record.exit_time ? new Date(record.exit_time) : null;
                    let duration = '';
                    let status = '';
                    
                    if (exitTime) {
                        const hours = ((exitTime - entryTime) / (1000 * 60 * 60)).toFixed(2);
                        duration = hours + ' 小时';
                        status = record.is_paid ? 
                            '<span class="badge bg-success">已支付</span>' : 
                            '<span class="badge bg-danger">未支付</span>';
                    } else {
                        duration = '在场内';
                        status = '<span class="badge bg-warning">在场内</span>';
                    }
                    
                    html += `
                        <tr>
                            <td>${record.id}</td>
                            <td>${record.license_plate}</td>
                            <td>${record.vehicle_type}</td>
                            <td>${record.entry_time}</td>
                            <td>${record.exit_time || '-'}</td>
                            <td>${duration}</td>
                            <td>¥${record.parking_fee.toFixed(2)}</td>
                            <td>${status}</td>
                        </tr>
                    `;
                });
                $('#recordsTableBody').html(html);
            }
        }
    });
}

$(document).ready(function() {
    // 加载记录
    $('a[href="#records"]').on('shown.bs.tab', function() {
        loadRecords();
    });
    
    // 保存设置
    $('#settingsForm').on('submit', function(e) {
        e.preventDefault();
        
        const data = {
            total_spaces: parseInt($('#totalSpaces').val()),
            first_hour_fee: parseFloat($('#firstHourFee').val()),
            additional_hour_fee: parseFloat($('#additionalHourFee').val())
        };
        
        $.ajax({
            url: '/api/config',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function(response) {
                if (response.success) {
                    alert('设置保存成功！');
                    location.reload();
                }
            }
        });
    });
});
</script>
{% endblock %}
